<template>
	<view class="punch-clock-btn" :style="'top:'+top+'rpx'">
		<view @touchmove.stop.prevent="setTouchMove">
			<button class="punch-clock" open-type="contact">
				<!-- <view class="iconfont icon-kefu"></view> -->
				<image src="../../static/images/kf.png" mode="widthFix"></image>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "contact",
		data() {
			return {
				top: '800',
			};
		},

		methods: {
			setTouchMove: function(e) {
				var that = this;
				if (e.touches[0].clientY < 540 && e.touches[0].clientY > 66) {
					that.top = e.touches[0].clientY * 2
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.punch-clock-btn {
		pointer-events: auto;
		width: 180rpx;	
		z-index: 11;
		position: fixed;
		right: 0;
	}

	.punch-clock-btn .punch-clock {
		position: relative;
		width: 100%;
		text-align: center;
		background-color: rgba(0, 0,0,0);
		line-height: 1;
	}

	.punch-clock-btn image {		
		width: 180rpx;			
		margin-bottom: -8rpx;
		position: relative;
		z-index: 11;
	}

	// .punch-clock-btn .btn {
	// 	background-color: #20a0ff;
	// 	width: 180rpx;
	// 	height: 60rpx;
	// 	border-radius: 30rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	color: #fff;
	// 	font-size: 28rpx;		
	// 	position: relative;
	// 	z-index: 12;
	// }

	// .punch-clock-btn .punch-clock {
	// 	border-radius: 40rpx 0 0 40rpx;
	// 	width: 120rpx;
	// 	height: 80rpx;
	// 	background-color:#EEF7FE;
	// 	border: 1px solid #20a0ff;
	// 	color: #20a0ff;
	// 	padding-top: 8rpx;
	// 	padding-left: 20rpx;
	// 	margin: 0;
	// 	font-weight: normal;
	// 	font-size: 20rpx;
	// 	text-align: center;
	// 	box-shadow: 0px 0px 6rpx 0px rgba(0, 146, 255, 0.38);
	// }

	// .punch-clock-btn .punch-clock .iconfont {
	// 	font-size: 36rpx;
	// 	margin-bottom: 6rpx;
	// }
</style>
